<!-- 修改密码页面 -->
<template>
   <div style="width: 50%" class="card">
     <el-form ref="formRef" :rules="data.rules" :model="data.user" label-width="80px" style="padding: 20px">
       <el-form-item label="原密码" prop="password">
         <el-input v-model="data.user.password" placeholder="请输入原密码" show-password></el-input>
       </el-form-item>
       <el-form-item label="新密码" prop="newPassword">
         <el-input v-model="data.user.newPassword" placeholder="请输入新密码" show-password></el-input>
       </el-form-item>
       <el-form-item label="确认密码" prop="confirmPassword">
         <el-input v-model="data.user.confirmPassword" placeholder="请确认新密码" show-password></el-input>
       </el-form-item>
       <div style="text-align: center">
         <el-button type="primary" @click="updatePassword">保 存</el-button>
       </div>
     </el-form>
   </div>
 </template>
 
 <script setup>
 import {reactive, ref} from "vue";
 import request from "@/utils/request.js";
 import {ElMessage} from "element-plus";
 import router from "@/router/index.js";
 
 const formRef = ref()
 
 const validatePass = (rule, value, callback) => {
   if (!value) {
     callback(new Error('请确认密码'))
   } else {
     if (value !== data.user.newPassword) {
       callback(new Error("确认密码跟原密码不一致!"))
     }
     callback()
   }
 }
 const data = reactive({
   user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
   rules: {
     password: [
       { required: true, message: '请输入原密码', trigger: 'blur' },
     ],
     newPassword: [
       { required: true, message: '请输入新密码', trigger: 'blur' },
     ],
     confirmPassword: [
       { validator: validatePass, trigger: 'blur' }
     ]
   }
 })
 
 const updatePassword = () => {
   // 表单校验
   formRef.value.validate(valid => {
     if (valid) {
       request.put('/updatePassword', data.user).then(res => {
         if (res.code === '200') {
           ElMessage.success('保存成功')
           logout()
         } else {
           ElMessage.error(res.msg)
         }
       })
     }
   })
 }
 
 const logout = () => {
   localStorage.removeItem('xm-user')
   router.push('/login')
 }
 </script>
 
 <style scoped>
 
 </style>